<template>
    <div>当前鼠标位置</div>
    <div>x: {{ mouse.x }}</div>
    <div>y: {{ mouse.y }}</div>
    <div>当前点击次数：{{ count }}</div>
    <button @click="add">点击</button>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref } from 'vue'

function userMouse() {
    const mouse = reactive({
        x: 0,
        y: 0,
    })
    // 提供方法
    const move = (e) => {
        mouse.x = e.pageX
        mouse.y = e.pageY
    }
    // 等价于之前的mounted
    onMounted(() => {
        document.addEventListener('mousemove', move)
    })
    // 等价于之前的destroyed
    onUnmounted(() => {
        document.removeEventListener('mousemove', move)
    })

    return mouse
}
export default {
    setup() {
        // ----------累加器相关代码-----------
        // 提供数据
        const count = ref(0)
        // 提供方法
        const add = () => {
            count.value++
        }
        // ----------累加器相关代码-----------

        //------------记录鼠标位置的相关代码------------
        const mouse = userMouse()
        //------------记录鼠标位置的相关代码------------

        // 模板中使用的数据 方法 都需要在setup函数中返回
        // setup函数是组合式API的起点
        return {
            count,
            add,
            mouse,
        }
    },
}
</script>
